<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>国际化（多语言） | BuildAdmin</title>
    <meta name="generator" content="VuePress 1.9.7">
    <link rel="icon" href="/images/favicon.ico">
    <meta name="description" content="使用流行技术栈快速创建商业级后台管理系统-BuildAdmin是基于TP6、Vue3.x、Typescript、Vite、Pinia、Element plus等的开源后台系统">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="keywords" content="BuildAdmin,ThinkPHP6通用后台,Vue3后台,BuildAdmin文档,vue3开源后台,vue3模板与案例市场">
    <meta name="author" content="妙码生花">
    <meta name="robots" content="all,follow">
    
    <link rel="preload" href="/assets/css/0.styles.76db4400.css" as="style"><link rel="preload" href="/assets/js/app.26dfc26f.js" as="script"><link rel="preload" href="/assets/js/2.845fc4bd.js" as="script"><link rel="preload" href="/assets/js/58.2b82c178.js" as="script"><link rel="prefetch" href="/assets/js/10.31502a42.js"><link rel="prefetch" href="/assets/js/11.c0667200.js"><link rel="prefetch" href="/assets/js/12.0022daab.js"><link rel="prefetch" href="/assets/js/13.496b9007.js"><link rel="prefetch" href="/assets/js/14.57a77bc0.js"><link rel="prefetch" href="/assets/js/15.a2ee4fc7.js"><link rel="prefetch" href="/assets/js/16.7050523a.js"><link rel="prefetch" href="/assets/js/17.c4c5529f.js"><link rel="prefetch" href="/assets/js/18.f0350247.js"><link rel="prefetch" href="/assets/js/19.60586b14.js"><link rel="prefetch" href="/assets/js/20.4c6361b4.js"><link rel="prefetch" href="/assets/js/21.f793d386.js"><link rel="prefetch" href="/assets/js/22.299fa3b0.js"><link rel="prefetch" href="/assets/js/23.460af9b1.js"><link rel="prefetch" href="/assets/js/24.67771dfc.js"><link rel="prefetch" href="/assets/js/25.57b0bfa7.js"><link rel="prefetch" href="/assets/js/26.30e9faee.js"><link rel="prefetch" href="/assets/js/27.15ffda62.js"><link rel="prefetch" href="/assets/js/28.4ca46604.js"><link rel="prefetch" href="/assets/js/29.09a58cb6.js"><link rel="prefetch" href="/assets/js/3.959fd4f8.js"><link rel="prefetch" href="/assets/js/30.c53f15cb.js"><link rel="prefetch" href="/assets/js/31.0d30028e.js"><link rel="prefetch" href="/assets/js/32.4591b41b.js"><link rel="prefetch" href="/assets/js/33.bd9ed146.js"><link rel="prefetch" href="/assets/js/34.0bedaafb.js"><link rel="prefetch" href="/assets/js/35.dded2c4a.js"><link rel="prefetch" href="/assets/js/36.3f14f7ef.js"><link rel="prefetch" href="/assets/js/37.348ab3dc.js"><link rel="prefetch" href="/assets/js/38.bea67b35.js"><link rel="prefetch" href="/assets/js/39.66735bad.js"><link rel="prefetch" href="/assets/js/4.a7dad9f3.js"><link rel="prefetch" href="/assets/js/40.24ae817d.js"><link rel="prefetch" href="/assets/js/41.20484420.js"><link rel="prefetch" href="/assets/js/42.d2d9cf07.js"><link rel="prefetch" href="/assets/js/43.638926f9.js"><link rel="prefetch" href="/assets/js/44.5b2e8865.js"><link rel="prefetch" href="/assets/js/45.b08599e3.js"><link rel="prefetch" href="/assets/js/46.3e165b3e.js"><link rel="prefetch" href="/assets/js/47.0f981d94.js"><link rel="prefetch" href="/assets/js/48.52c21e5e.js"><link rel="prefetch" href="/assets/js/49.5d5d4c94.js"><link rel="prefetch" href="/assets/js/5.2d6b30a8.js"><link rel="prefetch" href="/assets/js/50.379ba4f0.js"><link rel="prefetch" href="/assets/js/51.4f4ecaea.js"><link rel="prefetch" href="/assets/js/52.81ccb047.js"><link rel="prefetch" href="/assets/js/53.419686cb.js"><link rel="prefetch" href="/assets/js/54.783cb319.js"><link rel="prefetch" href="/assets/js/55.110fde12.js"><link rel="prefetch" href="/assets/js/56.53900e45.js"><link rel="prefetch" href="/assets/js/57.55cd3551.js"><link rel="prefetch" href="/assets/js/59.fec4fe12.js"><link rel="prefetch" href="/assets/js/6.4e9a5a2e.js"><link rel="prefetch" href="/assets/js/60.99354f6f.js"><link rel="prefetch" href="/assets/js/61.c528c138.js"><link rel="prefetch" href="/assets/js/62.831c810e.js"><link rel="prefetch" href="/assets/js/63.9923d5c6.js"><link rel="prefetch" href="/assets/js/64.01b9c0fd.js"><link rel="prefetch" href="/assets/js/65.1288d968.js"><link rel="prefetch" href="/assets/js/66.f7c8aabd.js"><link rel="prefetch" href="/assets/js/67.89455afa.js"><link rel="prefetch" href="/assets/js/68.ca185a9e.js"><link rel="prefetch" href="/assets/js/69.dfe2288f.js"><link rel="prefetch" href="/assets/js/7.58476ce6.js"><link rel="prefetch" href="/assets/js/70.ea823c37.js"><link rel="prefetch" href="/assets/js/71.9e222b70.js"><link rel="prefetch" href="/assets/js/72.77b15e17.js"><link rel="prefetch" href="/assets/js/73.f42962da.js"><link rel="prefetch" href="/assets/js/74.a2912f27.js"><link rel="prefetch" href="/assets/js/75.8db3af79.js"><link rel="prefetch" href="/assets/js/76.45426b7e.js"><link rel="prefetch" href="/assets/js/77.a5d8ef7a.js"><link rel="prefetch" href="/assets/js/78.cfcdd83a.js"><link rel="prefetch" href="/assets/js/79.d8b5e327.js"><link rel="prefetch" href="/assets/js/8.419e773f.js"><link rel="prefetch" href="/assets/js/80.a64f0503.js"><link rel="prefetch" href="/assets/js/9.633ba216.js">
    <link rel="stylesheet" href="/assets/css/0.styles.76db4400.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container max-content"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/images/logo.png" alt="BuildAdmin" class="logo"> <span class="site-name can-hide">BuildAdmin</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/guide/" class="nav-link">
  指南
</a></div><div class="nav-item"><a href="/senior/" class="nav-link router-link-active">
  进阶
</a></div><div class="nav-item"><a href="https://buildadmin.com" target="_blank" rel="noopener noreferrer" class="nav-link external">
  官网
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://demo.buildadmin.com" target="_blank" rel="noopener noreferrer" class="nav-link external">
  线上演示
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="代码仓库" class="dropdown-title"><span class="title">代码仓库</span> <span class="arrow down"></span></button> <button type="button" aria-label="代码仓库" class="mobile-dropdown-title"><span class="title">代码仓库</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://gitee.com/wonderful-code/buildadmin" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://github.com/build-admin/buildadmin" target="_blank" rel="noopener noreferrer" class="nav-link external">
  GitHub
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><a href="/fastadmin.html" class="nav-link">
  🎉FastAdmin
</a></div><div class="nav-item"><a href="https://gitee.com/wonderful-code/buildadmin/blob/master/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="nav-link external">
  更新日志
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://gitee.com/wonderful-code/build-admin-doc" target="_blank" rel="noopener noreferrer" class="repo-link">
    文档仓库
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/" class="nav-link">
  指南
</a></div><div class="nav-item"><a href="/senior/" class="nav-link router-link-active">
  进阶
</a></div><div class="nav-item"><a href="https://buildadmin.com" target="_blank" rel="noopener noreferrer" class="nav-link external">
  官网
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://demo.buildadmin.com" target="_blank" rel="noopener noreferrer" class="nav-link external">
  线上演示
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="代码仓库" class="dropdown-title"><span class="title">代码仓库</span> <span class="arrow down"></span></button> <button type="button" aria-label="代码仓库" class="mobile-dropdown-title"><span class="title">代码仓库</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://gitee.com/wonderful-code/buildadmin" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://github.com/build-admin/buildadmin" target="_blank" rel="noopener noreferrer" class="nav-link external">
  GitHub
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><a href="/fastadmin.html" class="nav-link">
  🎉FastAdmin
</a></div><div class="nav-item"><a href="https://gitee.com/wonderful-code/buildadmin/blob/master/CHANGELOG.md" target="_blank" rel="noopener noreferrer" class="nav-link external">
  更新日志
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://gitee.com/wonderful-code/build-admin-doc" target="_blank" rel="noopener noreferrer" class="repo-link">
    文档仓库
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>起步</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/senior/" aria-current="page" class="sidebar-link">后台交互</a></li><li><a href="/senior/directoryStructure.html" class="sidebar-link">目录结构</a></li><li><a href="/senior/oneClickCRUD.html" class="sidebar-link">CRUD代码生成</a></li><li><a href="/senior/databaseSpecification.html" class="sidebar-link">数据表设计规范</a></li><li><a href="/senior/multilingual.html" aria-current="page" class="active sidebar-link">国际化（多语言）</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/senior/multilingual.html#web端" class="sidebar-link">WEB端</a></li><li class="sidebar-sub-header"><a href="/senior/multilingual.html#server端" class="sidebar-link">server端</a></li></ul></li><li><a href="/senior/addMenuRule.html" class="sidebar-link">菜单规则（路由与权限）</a></li><li><a href="/senior/faq.html" class="sidebar-link">常见问题</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>WEB端专项</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/senior/web/icon.html" class="sidebar-link">字体图标</a></li><li><a href="/senior/web/axios.html" class="sidebar-link">网络请求</a></li><li><a href="/senior/web/stores.html" class="sidebar-link">状态管理</a></li><li><a href="/senior/web/formItem.html" class="sidebar-link">表单项目组件（formItem）</a></li><li><a href="/senior/web/baInput.html" class="sidebar-link">输入组件（baInput）</a></li><li><a href="/senior/web/baTable.html" class="sidebar-link">表格组件（table）</a></li><li><a href="/senior/web/terminal.html" class="sidebar-link">WEB终端组件</a></li><li><a href="/senior/web/formValidation.html" class="sidebar-link">表单验证</a></li><li><a href="/senior/web/directives.html" class="sidebar-link">内置指令</a></li><li><a href="/senior/web/utils.html" class="sidebar-link">辅助工具/函数</a></li><li><a href="/senior/web/styles.html" class="sidebar-link">CSS/SCSS样式</a></li><li><a href="/senior/web/justNeedWeb.html" class="sidebar-link">只需要WEB端</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>WebNuxt专项（SSR）</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/senior/nuxt/intro.html" class="sidebar-link">介绍</a></li><li><a href="/senior/nuxt/directoryStructure.html" class="sidebar-link">目录结构</a></li><li><a href="/senior/nuxt/request.html" class="sidebar-link">网络请求</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Server端专项</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/senior/server/debug.html" class="sidebar-link">开启调试</a></li><li><a href="/senior/server/apiDebug.html" class="sidebar-link">调试接口</a></li><li><a href="/senior/server/config.html" class="sidebar-link">配置</a></li><li><a href="/senior/server/controller.html" class="sidebar-link">控制器</a></li><li><a href="/senior/server/captcha.html" class="sidebar-link">验证码</a></li><li><a href="/senior/server/dataLImit.html" class="sidebar-link">数据权限控制</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>模块开发</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/senior/module/start.html" class="sidebar-link">开始</a></li><li><a href="/senior/module/basicInfo.html" class="sidebar-link">模块基本信息</a></li><li><a href="/senior/module/directoryStructure.html" class="sidebar-link">模块目录结构</a></li><li><a href="/senior/module/configJson.html" class="sidebar-link">模块基本配置</a></li><li><a href="/senior/module/installSql.html" class="sidebar-link">模块安装SQL</a></li><li><a href="/senior/module/coreController.html" class="sidebar-link">模块核心控制器</a></li><li><a href="/senior/module/event.html" class="sidebar-link">模块行为事件</a></li><li><a href="/senior/module/webBootstrap.html" class="sidebar-link">向 main.ts 插入代码</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="国际化-多语言"><a href="#国际化-多语言" class="header-anchor">#</a> 国际化（多语言）</h1> <h2 id="web端"><a href="#web端" class="header-anchor">#</a> WEB端</h2> <h3 id="语言包定义"><a href="#语言包定义" class="header-anchor">#</a> 语言包定义</h3> <ul><li>WEB端项目语言包分为<code>第三方</code>、<code>全局</code>、<code>页面按需加载</code>语言包三种，其中最常用的<code>页面语言包</code>，我们设计了分目录的管理方式。</li> <li>可以在<code>/src/lang/backend/语言</code>和<code>/src/lang/frontend/语言</code>目录下，建立任意目录和语言包文件，程序会自动进行动态批量加载。</li> <li>以下代码仅为<code>定义</code>和后续的<code>使用</code>演示用示例，以方便读者理解，并非项目实际的语言包文件。</li></ul> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token comment">// 全局中文语言包文件 /src/lang/globs-zh-cn.ts</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    <span class="token comment">// 语言翻译的key请勿带有英文句号（.）</span>
    Home<span class="token operator">:</span> <span class="token string">'首页'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>

<span class="token comment">// 全局英文语言包文件 /src/lang/globs-en.ts</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    Home<span class="token operator">:</span> <span class="token string">'Home'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>

<span class="token comment">// 管理员后台`控制台页面`的中文语言包文件 /src/lang/backend/zh-cn/dashboard.ts（页面语言包，后台放在 backend 目录）</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    republish<span class="token operator">:</span> <span class="token string">'重新发布'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>

<span class="token comment">// 管理员后台`控制台页面`的英文语言包文件 /src/lang/backend/en/dashboard.ts（页面语言包，后台放在 backend 目录）</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    republish<span class="token operator">:</span> <span class="token string">'Republish'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>

<span class="token comment">// 会员前台`会员登录`页面的中文语言包文件 /src/lang/frontend/zh-cn/user/login.ts（页面语言包，前台放在 frontend 目录）</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    title<span class="token operator">:</span> <span class="token string">'登录到会员中心'</span>
<span class="token punctuation">}</span>

<span class="token comment">// 会员前台`会员登录`页面的英文语言包文件 /src/lang/frontend/en/user/login.ts（页面语言包，前台放在 frontend 目录）</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    title<span class="token operator">:</span> <span class="token string">'Login'</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="语言包使用"><a href="#语言包使用" class="header-anchor">#</a> 语言包使用</h3> <h4 id="在模板和ts代码中使用"><a href="#在模板和ts代码中使用" class="header-anchor">#</a> 在模板和TS代码中使用</h4> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- 全局翻译 --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">:title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>t('Home')<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>{{ t('Home') }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>

    <span class="token comment">&lt;!-- 控制台页面可以使用的语言翻译 --&gt;</span>
    <span class="token comment">&lt;!-- 系统根据路由的 name 和 path 自动加载对应目录结构的语言包 --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">:title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>t('dashboard.republish')<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>{{ t('dashboard.republish') }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>

    <span class="token comment">&lt;!-- 会员登录页面可以使用的语言翻译 --&gt;</span>
    <span class="token comment">&lt;!-- 系统根据路由的 name 和 path 自动加载对应目录结构的语言包 --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">:title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>t('user.login.title')<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> useI18n <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vue-i18n'</span>
<span class="token keyword">const</span> <span class="token punctuation">{</span> t <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">useI18n</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

<span class="token keyword">const</span> globs <span class="token operator">=</span> <span class="token function">t</span><span class="token punctuation">(</span><span class="token string">'Home'</span><span class="token punctuation">)</span> <span class="token comment">// 使用全局翻译</span>
<span class="token keyword">const</span> dashboard <span class="token operator">=</span> <span class="token function">t</span><span class="token punctuation">(</span><span class="token string">'dashboard.republish'</span><span class="token punctuation">)</span> <span class="token comment">// 在控制台页面内可以使用的语言翻译</span>
<span class="token keyword">const</span> login <span class="token operator">=</span> <span class="token function">t</span><span class="token punctuation">(</span><span class="token string">'user.login.title'</span><span class="token punctuation">)</span> <span class="token comment">// 在会员登录页面内可以使用的语言翻译</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h4 id="仅在模板中使用"><a href="#仅在模板中使用" class="header-anchor">#</a> 仅在模板中使用</h4> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    
    <span class="token comment">&lt;!-- 全局翻译 --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">:title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>$t('Home')<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>{{ $t('Home') }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>

    <span class="token comment">&lt;!-- 页面语言翻译 --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">:title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>$t('dashboard.republish')<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">&gt;</span></span>{{ $t('dashboard.republish') }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">setup</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="实现介绍"><a href="#实现介绍" class="header-anchor">#</a> 实现介绍</h3> <ul><li>web端的国际化使用了<code>vue-i18n</code>实现。</li> <li>我们只加载了当前环境对应的语言包，比如<code>zh-cn</code>或者<code>en</code>的语言包文件，所以切换语言包，站点会自动刷新。</li> <li>我们在<code>main.js</code>文件中调用<code>/@/lang/index</code>文件内的<code>loadLang</code>函数对多语言支持进行了初始化。</li> <li>在<code>/@/lang/index</code>文件中，我们利用<code>import.meta.glob</code>批量加载了<code>element</code>、<code>公共</code>的语言包文件，并准备好了<code>页面</code>语言包的按需加载句柄（页面语言包并没有真正的加载，相当于准备好了可加载列表）。</li> <li>在用户真正打开对应页面时，再根据路由的<code>path</code>和<code>name</code>进行加载，按需自动加载的工作是在<code>/src/router/index.ts</code>中定义的。</li> <li><code>页面</code>语言包，支持无限目录层级加载，我们根据对应目录结构，实现了以<code>.</code>分隔的语言翻译<code>key</code>，比如：<code>/@/lang/backend/zh-cn/auth/menu.ts</code>语言包定义如下：</li></ul> <div class="language-ts extra-class"><pre class="language-ts"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    name<span class="token operator">:</span> <span class="token string">'名称'</span><span class="token punctuation">,</span>
    stateList<span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token string-property property">'state 1'</span><span class="token operator">:</span> <span class="token string">'状态1'</span><span class="token punctuation">,</span>
        <span class="token string-property property">'state 2'</span><span class="token operator">:</span> <span class="token string">'状态2'</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="language-ts extra-class"><pre class="language-ts"><code><span class="token comment">// 使用该语言翻译</span>
<span class="token comment">// 它的格式是：目录.目录.翻译key</span>
<span class="token function">t</span><span class="token punctuation">(</span><span class="token string">'auth.menu.name'</span><span class="token punctuation">)</span>
<span class="token function">t</span><span class="token punctuation">(</span><span class="token string">'auth.menu.stateList.state 1'</span><span class="token punctuation">)</span>
</code></pre></div><ul><li><code>element-plus</code>的语言包，我们只载入了<code>中文</code>和<code>英文</code>，若需支持<code>element-plus</code>的其他语言包，请自行在<code>/@/lang/index</code>文件中添加。</li></ul> <div class="custom-block warning"><p class="custom-block-title">重要提示</p> <p>WEB端语言翻译的<code>key</code>请勿带有英文句号（<code>.</code>）</p></div> <h2 id="server端"><a href="#server端" class="header-anchor">#</a> server端</h2> <p>SERVER端使用了<code>Thinkphp6</code>自带的多语言功能，并做了适当封装。</p> <h3 id="语言包定义-2"><a href="#语言包定义-2" class="header-anchor">#</a> 语言包定义</h3> <ul><li>一个应用下的语言包目录结构类似于：</li></ul> <div class="language- extra-class"><pre class="language-text"><code>app/admin/lang
├─lang
│  │  en.php 应用公共英文语言包
│  │  zh-cn.php 应用公共中文语言包
│  │  
│  ├─en
│  │  │  index.php Index控制器英文语言包
│  │  │  
│  │  └─user
│  │          moneylog.php user/MoneyLog控制器英文语言包
│  │          
│  └─zh-cn
│      │  index.php Index控制器中文语言包
│      │  
│      └─user
│              moneylog.php user/MoneyLog控制器中文语言包
</code></pre></div><ul><li>我们已经在<code>app\common\controller\Api</code>Api基类中，实现了对应控制器的语言包自动加载，所以可以直接使用语言翻译，而无需额外的语言包加载。</li></ul> <p><br>
以下代码仅为<code>定义</code>和后续的<code>使用</code>演示用示例，以方便读者理解，并非项目实际的语言包文件。</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token comment">// 应用公共英文语言包文件</span>
<span class="token comment">// app/admin/lang/en.php</span>
<span class="token keyword">return</span> <span class="token punctuation">[</span>
    <span class="token string single-quoted-string">'Hello %s'</span> <span class="token operator">=&gt;</span> <span class="token string single-quoted-string">'Hello,%s'</span><span class="token punctuation">,</span>
    <span class="token string double-quoted-string">&quot;Hello %s, I'm %s&quot;</span> <span class="token operator">=&gt;</span> <span class="token string double-quoted-string">&quot;Hello %s, I'm %s&quot;</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>

<span class="token comment">// 应用公共中文语言包文件</span>
<span class="token comment">// app/admin/lang/zh-cn.php</span>
<span class="token keyword">return</span> <span class="token punctuation">[</span>
    <span class="token string single-quoted-string">'Hello %s'</span> <span class="token operator">=&gt;</span> <span class="token string single-quoted-string">'你好，%s'</span><span class="token punctuation">,</span>
    <span class="token string double-quoted-string">&quot;Hello %s, I'm %s&quot;</span> <span class="token operator">=&gt;</span> <span class="token string double-quoted-string">&quot;你好%s，我是%s&quot;</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="语言包使用-2"><a href="#语言包使用-2" class="header-anchor">#</a> 语言包使用</h3> <ul><li>我们定义了全局公共函数<code>__</code>，来进行语言翻译：</li></ul> <p>函数定义：</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token comment">/**
 * 语言翻译
 * @param string $name 被翻译字符
 * @param array  $vars 替换字符数组
 * @param string $lang 指定翻译语言
 * @return string
 */</span>
<span class="token function">__</span><span class="token punctuation">(</span><span class="token keyword type-hint">string</span> <span class="token variable">$name</span><span class="token punctuation">,</span> <span class="token keyword type-hint">array</span> <span class="token variable">$vars</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword type-hint">string</span> <span class="token variable">$lang</span> <span class="token operator">=</span> <span class="token string single-quoted-string">''</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>函数使用：</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token function">__</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Hello %s'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string single-quoted-string">'BuildAdmin'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">__</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Hello %s'</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string single-quoted-string">'BuildAdmin'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'en'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">__</span><span class="token punctuation">(</span><span class="token string double-quoted-string">&quot;Hello %s, I'm %s&quot;</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string single-quoted-string">'BuildAdmin'</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'妙码生花'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token string single-quoted-string">'zh-cn'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h3 id="加载说明"><a href="#加载说明" class="header-anchor">#</a> 加载说明</h3> <ul><li>如果控制器继承了<code>app\common\controller\Api</code>，则可以实现语言包按控制器<strong>自动加载</strong>。</li></ul> <h4 id="假设当前为中文语言环境"><a href="#假设当前为中文语言环境" class="header-anchor">#</a> 假设当前为中文语言环境</h4> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token comment"># 访问</span>
https://buildadmin.com/index.php/admin/auth.admin/index
</code></pre></div><div class="language-bash extra-class"><pre class="language-bash"><code><span class="token comment"># 自动加载语言包</span>
app/admin/lang/zh-cn.php
app/admin/lang/zh-cn/auth/admin.php
</code></pre></div><p>有时我们需要在当前控制器导入其他语言包文件，可以参考以下代码进行加载：</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token variable">$langset</span> <span class="token operator">=</span> <span class="token variable">$this</span><span class="token operator">-&gt;</span><span class="token property">app</span><span class="token operator">-&gt;</span><span class="token property">lang</span><span class="token operator">-&gt;</span><span class="token function">getLangSet</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token variable">$this</span><span class="token operator">-&gt;</span><span class="token property">app</span><span class="token operator">-&gt;</span><span class="token property">lang</span><span class="token operator">-&gt;</span><span class="token function">load</span><span class="token punctuation">(</span><span class="token punctuation">[</span>
    <span class="token function">app_path</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">.</span> <span class="token string single-quoted-string">'lang'</span> <span class="token operator">.</span> <span class="token constant">DIRECTORY_SEPARATOR</span> <span class="token operator">.</span> <span class="token variable">$langset</span> <span class="token operator">.</span> <span class="token constant">DIRECTORY_SEPARATOR</span> <span class="token operator">.</span> <span class="token punctuation">(</span><span class="token function">str_replace</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'/'</span><span class="token punctuation">,</span> <span class="token constant">DIRECTORY_SEPARATOR</span><span class="token punctuation">,</span> <span class="token variable">$this</span><span class="token operator">-&gt;</span><span class="token property">app</span><span class="token operator">-&gt;</span><span class="token property">request</span><span class="token operator">-&gt;</span><span class="token property">controllerPath</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token operator">.</span> <span class="token string single-quoted-string">'.php'</span>
<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div></div> <footer class="page-edit"><div class="edit-link"><a href="https://gitee.com/wonderful-code/build-admin-doc/edit/master/docs/senior/multilingual.md" target="_blank" rel="noopener noreferrer">点此帮助我们改善此页面</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">2023/1/8 13:08:34</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/senior/databaseSpecification.html" class="prev">
        数据表设计规范
      </a></span> <span class="next"><a href="/senior/addMenuRule.html">
        菜单规则（路由与权限）
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"></div></div>
    <script src="/assets/js/app.26dfc26f.js" defer></script><script src="/assets/js/2.845fc4bd.js" defer></script><script src="/assets/js/58.2b82c178.js" defer></script>
  </body>
</html>
